<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@include file="../WEB-INF/jspf/controlesessao.jspf"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Novo Salas</title>
        <script type="text/javascript" src="../js/jquery.js" ></script>
        <script type="text/javascript" src="../js/jquery.validate.js"></script>

        <script type="text/javascript" src="../js/jquery-ui-1.8.2.custom.min.js"></script>
        <script type="text/javascript" src="../js/forms.js"></script>

        <link rel="stylesheet" href="../css/forms.css">
        <link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />

    </head>

    <script>
        $(document).ready(function(){
            $("#form").validate({
                rules: {id_tiposala: {required: true,digits: true
                    }
                    ,id_unidade: {required: true,digits: true
                    }
                    ,desc_sala: {required: true}
                    ,lotacao_sala: {required: true,digits: true
                    }
                },
                submitHandler: function(form) {
                    salvar(form);
                }
            });

            $('#novaestrutura').dialog({
                autoOpen: false,
                resizable: true,
                height:220,
                width:320,
                modal: true,
                buttons: {
                    "Salvar": function() {
                        salvar(formEstrutura);                        
                    },
                    "Fechar": function() {
                        $(this).dialog("close");
                        atualizar();
                    }
                }
            });

            $("#estruturas").load("../Estruturas/getEstruturas.jsp?token=${sessionScope.token}").fadeIn(300);

            $("#incluir_est").click(function(){
                $('#novaestrutura').dialog('open');
            });
        });


        function atualizar(){
           
            $.ajax(
            {
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                type: "POST",
                url: "../Estruturas/getEstruturas.jsp",
                beforeSend: function() {
                    $('#estruturas').fadeOut(300);
                },
                success: function(txt) {
                    if(txt.indexOf("Erro") < 0){
                        $('#estruturas').html(txt);
                        $('#estruturas').fadeIn(300);
                        $('#msg').html('');
                    }else{
                        $('#msg').html(txt);
                    }
                },
                error: function(txt) {
                    alert('Houve um problema interno. tente novamente mais tarde.');
                }
            }
        );
        }
    </script>


    <body>
        
        <form name="form" id="form" method="post" action="insert.jsp" >
            <div id="formulario">
                <fieldset><legend>Dados</legend>
                    <p><label class="lbInput">Unidade<em>*</em></label>
                        <sql:query var="queryUnidade" dataSource="jdbc/dbo_MicrosoftSQLServer">
                            SELECT  * FROM Unidades
                            where situacao_unidade='A'
                            </sql:query>
                        <select name="id_unidade" >
                            <option value="">Selecione um valor</option>
                            <c:forEach var="unidade" items="${queryUnidade.rows}">
                                <option value="${unidade.id_unidade}">${unidade.desc_unidade}</option>
                            </c:forEach>
                        </select>
                    </p>
                    <p><label class="lbInput">Tipo da Sala<em>*</em></label>
                        <sql:query var="queryTipo" dataSource="jdbc/dbo_MicrosoftSQLServer">
                            SELECT  * FROM tiposalas
                            where situacao_tiposala='A'
                        </sql:query>
                        <select name="id_tiposala" >
                            <option value="">Selecione um valor</option>
                            <c:forEach var="tipo" items="${queryTipo.rows}">
                                <option value="${tipo.id_tiposala}">${tipo.desc_tiposala}</option>
                            </c:forEach>
                        </select>
                    </p>
                    
                    <p><label class="lbInput">Descrição<em>*</em></label>
                        <input type="text" name="desc_sala" size="70" maxlength="100" class="required">
                    </p>
                    <p><label class="lbInput">Capacidade<em>*</em></label>
                        <input type="text" name="lotacao_sala" size="10" maxlength="10" class="required">
                    </p>                  
                    <p>
                        <a id="incluir_est"href="#">Nova</a>
                    </p>
                    <div id="estruturas" style="display:none">

                    </div>
                    <p>
                        <input class="submit" type="submit" value="Salvar">
                        <input class="submit" type="button" value="Remover" onclick="remover(document.forms[0])" style="visibility:hidden">
                        <input class="submit" type="button" value="Listar" onclick="listar('fm_lista_Salas.jsp')">
                    </p>
                    <div id="ajax_dados" style="display:block">
                    </div>
                    <div id="msg" style="display:inline"></div>
                </fieldset>
            </div>
        <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>

        <div id="novaestrutura" title="Incluir Nova Estrutura" style="display:none">
            <form action="../Estruturas/insert.jsp" name="formEstrutura" id="formEstrutura" method="post">
                <p><label class="lbInput">Descrição da Estrutura</label>
                    <input type="text" name="desc_estrutura" size="20" maxlength="50">
                </p>
            <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
        </div>

    </body>
</html>
